import * as THREE from 'three';
import {lon2xy} from "./math"
import output_fragment from './output_fragment.glsl.js'
import {flyGroup} from './flyGroup.js'
import {createWaveMesh} from "./WaveMesh.js"//波动光圈
import {createConeMesh} from "./ConeMesh.js"//旋转棱锥
var E = 121.49526536464691; //标注地点
var N = 31.24189350905988;
var xy = lon2xy(E, N);
const model = new THREE.Group();
const loader = new THREE.FileLoader();
var buildGroup = new THREE.Group(); 
var waveMeshGroup = new THREE.Group()
waveMeshGroup.add(createWaveMesh(100))
waveMeshGroup.position.set(xy.x,xy.y,250)
var coneMeshGroup = new THREE.Group()
coneMeshGroup.add(createConeMesh(40))
coneMeshGroup.position.set(xy.x,xy.y,250)
loader.setResponseType('json')
loader.load('/黄浦江.json',(data)=>{
  data.features.forEach(build => {
    if(build.geometry){
      // 把"Polygon"和"MultiPolygon"的geometry.coordinates数据结构处理为一致
      if(build.geometry.type === 'Polygon'){
        build.geometry.coordinates = [build.geometry.coordinates]
      }
      buildGroup.add(ShapeMesh(build.geometry.coordinates,0));
    }
  });
  model.add(buildGroup)
})

loader.load(
	'/上海外滩.json',(data)=>{
    data.features.forEach(build => {
      if(build.geometry){
        // 把"Polygon"和"MultiPolygon"的geometry.coordinates数据结构处理为一致
        if(build.geometry.type === 'Polygon'){
          build.geometry.coordinates = [build.geometry.coordinates]
        }
        buildGroup.add(ShapeMesh(build.geometry.coordinates,build.properties.Floor*3));
      }
    });
    model.add(buildGroup)
  })

  const material =  new THREE.MeshLambertMaterial({
    color:0x00ffff
  })
  var materialShader = null
  // GPU执行material对应的着色器代码前，通过.onBeforeCompile()插入新的代码，修改已有的代码
  material.onBeforeCompile = function (shader) {
    // 浏览器控制台打印着色器代码
    // console.log('shader.fragmentShader', shader.fragmentShader)
    materialShader = shader;
    shader.uniforms.time = {
      value: 0.0,
    };
    // 顶点位置坐标position类似uv坐标进行插值计算，用于在片元着色器中控制片元像素
    shader.vertexShader = shader.vertexShader.replace(
      'void main() {',
      ['varying vec3 vPosition;',
        'void main() {',
        'vPosition = position;',
      ].join('\n') // .join()把数组元素合成字符串
    );
    // shader.fragmentShader = shader.fragmentShader.replace(
    //   'void main() {',
    //   ['varying vec3 vPosition;',
    //     'uniform float time;',
    //     'void main() {',
    //   ].join('\n')
    // );
    shader.fragmentShader = shader.fragmentShader.replace(
      'void main() {',
      ['varying vec3 vPosition;',
        'uniform float time;',
        'void main() {',
      ].join('\n')
    );
    shader.fragmentShader = shader.fragmentShader.replace('#include <output_fragment>', output_fragment);
  };
const ShapeMesh = function(pointsArr,height){
  var shapeArr = []
  pointsArr.forEach(pointsArr=>{
    var vector2Arr = []
    pointsArr[0].forEach(elem=>{
      var xy = lon2xy(elem[0],elem[1])
      vector2Arr.push(new THREE.Vector2(xy.x,xy.y))
    })
    shapeArr.push(new THREE.Shape(vector2Arr))
  })
 const geometry = new THREE.ExtrudeGeometry(
    shapeArr, //二维轮廓
      {
          depth: height, //拉伸长度
      }
  );
  const mesh = new THREE.Mesh( geometry, material);
  return mesh
}
function scanAnimation(){
  requestAnimationFrame(scanAnimation);
  if(!materialShader){
    return
  }
  materialShader.uniforms.time.value = materialShader.uniforms.time.value + 0.08
  if(materialShader.uniforms.time.value>6){
    materialShader.uniforms.time.value = 0
  }
}
scanAnimation();
model.add(flyGroup,coneMeshGroup,waveMeshGroup)
export {model};